<template>
    <div name="home">
        <h1>首页</h1>
        <el-table :data="goods">
            <el-table-column label="书名" prop="name"></el-table-column>
            <el-table-column label="价格" prop="price"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scoped">
                    <el-button type="primary" @click="handleEdit(scoped.row)"
                        >编辑</el-button
                    >
                    <el-button type="danger" @click="handleDelete(scoped.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getRoutes } from '../axios';
export default {
    // 组件内的
    // beforeRouteEnter(to, from, next) {
    //     console.log('to', to);
    //     console.log('from', from);
    //     next();
    // },
    async created() {
        const res = await getRoutes();
        console.log('res', res);
    },
    watch: {
        $route: {
            handler(route) {
                console.log('route', route);
            },
            immediate: true,
        },
    },
    data() {
        return {
            goods: [
                {
                    id: 1,
                    name: 'Egg 实战',
                    price: 129,
                },
                {
                    id: 2,
                    name: 'Webpack 优化',
                    price: 99,
                },
                {
                    id: 3,
                    name: 'Vue项目实战',
                    price: 89,
                },
            ],
        };
    },
    methods: {
        handleEdit(row) {
            this.$router.push(`/detail/${row.id}`);
        },
        handleDelete(row) {},
    },
};
</script>
